

<!DOCTYPE html>
<html lang="zh-CN" >
<head>
    <meta charset="UTF-8">
    <title>头盔检测系统-主界面</title>
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/color.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script src="helmet.js"></script>

    <style>
        .button-container {
            display: flex;
            justify-content: center;
            gap: 50px; /* 按钮之间的间距 */
            margin-top: 100px;
        }
        .button-container button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5em 1em; /* 使用em单位，相对于字体大小 */
            font-size: clamp(12px, 2vw, 25px); /* 响应式字体大小 */
            min-width: fit-content; /* 最小宽度适应内容 */
        }
    </style>

</head>
<body style=" background: #00bbee">

<div style="padding: 20px;">
    <div style="text-align: left; font-size: 12px;">欢迎 <span id="userNameForWelcome">用户名</span> </div>

    <div class="button-container">
        <button id="helmetDetect" onclick="helmetDetect()">头盔检测</button>
        <button id="dataAnalyse" onclick="dataAnalyse()">数据分析</button>
        <button id="alarm" onclick="alarm()">警报</button>
        <button id="dbManage" onclick="dbManage()">数据库管理</button>
    </div>
    <div style="text-align: right; position: absolute; bottom: 20px; right: 20px;">
        <button  onclick="exitSystem()">退出系统</button>
    </div>
</div>

<script>
    //页面加载
    $(document).ready(function() {
        welcome().then(user => {
            if (user) {
                document.getElementById('userNameForWelcome').innerText = user.name;
                handleUserPermissions(user.func);
            }
            else
                exitSystem();
        });

    })


    //隐藏无功能权限的按钮
    function handleUserPermissions(func) {
        //console.log("用户权限: " + func);
        if(func !== 1) {
            $("#dbManage").hide();
        }
        if(func == 2) {
            $("#dataAnalyse").hide();
        } else if(func == 3) {
            $("#alarm").hide();
        }
    }
    //功能按钮跳转页面
    function helmetDetect(){
        window.location.href = 'helmetDetectVideo.html';
    }
    function dataAnalyse() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
            window.location.href = 'dataAnalyse_mobile.html';
        }
        else
            window.location.href = 'dataAnalyse.html';
    }
    function alarm(){
        window.location.href = 'alarm.html';
    }
    function dbManage(){
        window.location.href = 'dbManage.html';
    }

</script>
</body>
</html>